<template>
  <div class="publish-blog-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>发布博客</span>
        </div>
      </template>
      <el-form :model="blogForm" :rules="rules" ref="blogFormRef" label-width="80px">
        <!-- 博客标题 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="blogForm.title" placeholder="请输入博客标题"></el-input>
        </el-form-item>
        <!-- 博客内容 -->
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="blogForm.content" :rows="10" placeholder="请输入博客内容"></el-input>
        </el-form-item>
        <!-- 自定义标签输入 -->
        <el-form-item label="标签" prop="tags">
          <el-input v-model="newTag" placeholder="请输入标签" style="width: 200px;"></el-input>
          <el-button type="primary" @click="addTag">添加标签</el-button>
          <div class="tag-list">
            <el-tag
                v-for="(tag, index) in blogForm.label"
                :key="index"
                closable
                @close="removeTag(index)"
                style="margin-right: 5px; margin-top: 5px;">
              {{ tag }}
            </el-tag>
          </div>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitBlog">发布博客</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import apiClient from "@/api";

export default {
  name: "Publishblog",
  data() {
    return {
      blogForm: {
        title: "",
        content: "",
        label: [] // 存储用户输入的标签
      },
      rules: {
        title: [{required: true, message: "请输入博客标题", trigger: "blur"}],
        content: [{required: true, message: "请输入博客内容", trigger: "blur"}]
      },
      newTag: "", // 新增标签的临时变量
      tagOptions: ["efd"] // 标签选项（可选，作为参考）
    };
  },
  created() {
    // 动态加载标签数据（可选）
    // this.loadTags();
  },
  methods: {
    // // 加载标签数据（可选）
    // loadTags() {
    //   apiClient.get("/api/tags").then(res => {
    //     if (res.code === 200) {
    //       this.tagOptions = res.data;
    //     } else {
    //       this.$message.error("加载标签失败");
    //     }
    //   }).catch(err => {
    //     console.error(err);
    //     this.$message.error("加载标签失败");
    //   });
    // },
    // 添加标签
    addTag() {
      if (this.newTag.trim()) {
        //  数组添加元素
        this.blogForm.label.push(this.newTag);
        this.newTag = ""; // 清空输入框
      }
    },
    // 移除标签
    removeTag(index) {
      this.blogForm.tags.splice(index, 1);
    },
    // 提交博客
    submitBlog() {
      this.$refs.blogFormRef.validate(valid => {
        console.log(this.blogForm)
        if (valid) {
          apiClient.post("/api/releaseBlog", this.blogForm).then(res => {

            if (res.code === 200) {
              this.$message.success("博客发布成功");
              this.blogForm.content = "";
              this.blogForm.label = [];
              this.blogForm.title = "";

              this.$router.push("/");

            } else {
              this.$message.error("博客发布失败");
            }
          }).catch(err => {
            console.error(err);
            this.$message.error("博客发布失败");
          });
        } else {
          this.$message.error("请填写完整信息");
        }
      });
    }
  }
};
</script>

<style scoped>
.publish-blog-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tag-list {
  margin-top: 10px;
}
</style>
<!--发送 文章 需要的基本参数
 String content;
 String l_name; 标签名-->